<template>
  <div>
    {{ $t("message.app.dashboard.analysis")["timeLabel"] }}
    <a-date-picker></a-date-picker>
    <Chart :chart-option="option"></Chart>
    <!-- chart 的源代码 -->
    <pre v-highlightjs="chartCode"><code class="html"></code></pre>
  </div>
</template>

<script>
import Chart from "./../../components/Chart";
// import random from "lodash/random";
// import axios from "axios";
import request from "./../../utils/request";
// 使用raw-loader将导入的模块解析为字符串，'!!' 的作用是禁用该文件在webpack.config.js 指定的其他loader，并且使用raw-loader
import chartCode from "!!raw-loader!./../../components/Chart";
// 导入高亮的style
import "highlight.js/styles/default.css";
export default {
  name: "Analysis",
  components: {
    Chart
  },
  data() {
    return {
      option: {},
      chartCode
    };
  },
  mounted() {
    this.getData();
    console.log("i18n 实例:", this.$i18n);
    console.log("i18n 语言包:", this.$t("message"));
  },
  beforeDestroy() {
    window.clearInterval(this.interval);
  },
  methods: {
    getData() {
      request({
        url: "/api/dashboard/chart",
        method: "get",
        params: { ID: 12345 }
      }).then(response => {
        this.option = {
          title: {
            text: "ECharts 入门示例"
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: response.data
            }
          ]
        };
      });
    }
    // axios
    //   .get("/api/dashboard/chart", { params: { ID: 12345 } })
    //   .then(response => {
    //     this.option.series[0].data = response.data.map(num => {
    //       return random(0, num);
    //     });
    //     this.option = { ...this.option };
    //   });
    // this.interval = setInterval(() => {
    //   axios.get("/api/dashboard/chart", {params: {ID: 12345}}).then(response => {
    //     this.option.series[0].data = response.data.map((num) => {
    //         return random(0, num);
    //       });
    //     this.option = {...this.option};
    //   })
    //   // this.option.series[0].data = this.option.series[0].data.map(() => {
    //   //   // return window.parseInt(Math.random() * 301) // 返回0-300之间的随机数
    //   //   return random(0, 300); // 使用lodash提供的随机数方法
    //   // });
    //   // this.option = {...this.option};
    // }, 3000);
  }
};
</script>

<style lang="less"></style>
